<template>
<div id="test">
    <div id="side-menu">
        <Menu id="left-menu" mode="vertical" :theme="theme2">
            <Submenu name="1">
                <template slot="title">
                    <Icon type="ios-bookmark" />
                    常用操作
                </template>
                <MenuItem name="1-1" @click.native="init">初始化插件</MenuItem>
                <MenuItem name="1-2" @click.native="createDocument">新建文档</MenuItem>
                <MenuItem name="1-3" @click.native="wpsclose">关闭文档</MenuItem>
                <MenuItem name="1-4" @click.native="putPluginType">设置模块类型</MenuItem>
                <MenuItem name="1-5" @click.native="getPluginType">获取模块类型</MenuItem>
                <MenuItem name="1-6" @click.native="getVersion">获取版本号</MenuItem>
                <MenuItem name="1-7" @click.native="fullScreen">全屏【CTRL+Q退出】</MenuItem>
            </Submenu>
            <Submenu name="2">
                <template slot="title">
                    <Icon type="ios-bookmark" />
                    操作本地文档
                </template>
                <MenuItem name="2-1" @click.native="openDocumentT">打开本地文档</MenuItem>
                <MenuItem name="2-3" @click.native="saveAs">保存到本地</MenuItem>
                <MenuItem name="2-4" @click.native="saveAsPop">保存到本地弹窗</MenuItem>
            </Submenu>
            <Submenu name="3">
                <template slot="title">
                    <Icon type="ios-bookmark" />
                    操作远程文档
                </template>
                <MenuItem name="3-1" @click.native="openDocumentRemote">打开远程文档</MenuItem>
                <MenuItem name="3-2" @click.native="saveURL">保存到远程</MenuItem>
            </Submenu>

        </Menu>       
    </div>
    <div id="wps-content">
        <div id="wps"></div>
    </div>
</div>
</template>

<script>
import {wpp_init} from '../api/wpp.js'

var DocFrame;
export default {
    name: "wps",
    data() {
        return {
            theme2: 'dark'
        }
    },
    methods: {
        init() {    //初始化插件
            DocFrame = wpp_init("wps", "100%", "100%");
        },
        createDocument() {  //新建文档
            DocFrame.createDocument("uop");
        },
        wpsclose() { //关闭文档
            var aa = DocFrame.close();
            alert(aa);
        },
        putPluginType() {  //设置模块类型
            var filename = prompt("请输入类型wps/wpp/et", "wpp");
            if (filename != "")
            DocFrame.AppModeType = filename;
        },
        getPluginType() {  //获取模块类型
            alert(DocFrame.AppModeType);
        },
        getVersion() {  //获取版本号
            alert(DocFrame.getPluginVersion());
        },
        fullScreen() {  //全屏
            DocFrame.FullScreen();
        },

        openDocumentT() {   //只读打开本地文档
            var path = prompt("请输入要打开的名称", "D:\\test.dps");
            if (path != null && path != "") {
                var aa = DocFrame.openDocument(path, true);
                alert(aa);
            }
        },
        saveAs() {  //保存到本地
            var path = prompt("请输入要保存的名称", "D:\\test.dps");
            if (path != null && path != "") {
                var aa = DocFrame.saveAs(path);
                alert(aa);
            }
        },

        saveAsPop() {   //保存到本地弹窗
            var aa = DocFrame.saveAs();
            alert(aa);
        },

        openDocumentRemote() {  //打开远程文档
            var URL = prompt("请输入要打开的远程文件名称", "http://localhost:8080/wps/test.dps");
            if (URL != null && URL != "") {
                alert(DocFrame.openDocumentRemote(URL, false));
            }
        },
        saveURL() {  //保存到远程
            var name = prompt("请输入要保存的名称,支持xls/et/txt/csv/dif/dbf/xlt/prn/html/htm/mht/xml/xlsx/xlsm/xlam/ett/uof/uos", "test.dps");
            var url = "http://localhost:8080/wps/upload_w.jsp";
            var ret = DocFrame.saveURL(url, name);
            alert(ret);
        }

    }
}
</script>

<style scoped>
#test {
    display: flex;
    flex-direction: row;
    height: 100%
}
#side-menu {
    overflow: scroll;
    background: #eeeeee;
}
#wps-content {
    margin-left: 5%;
    margin-right: 5%;
    width: 80%;
    height: 100%;
}
#wps {
    height: 80%;
}
#left-menu {
    height: 100%;
}
</style>